<template>
  <div class="auto-import-demo">
    <el-card>
      <template #header>
        <h2>自动引入功能演示</h2>
      </template>

      <el-alert title="🎉 自动引入配置成功！" type="success" :closable="false" show-icon>
        <p>以下组件和API都无需手动import，已自动引入：</p>
      </el-alert>

      <el-divider />

      <!-- Vue API 自动引入演示 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <h3>Vue API 自动引入</h3>
            </template>
            <ul>
              <li>✅ ref: {{ count }}</li>
              <li>✅ computed: {{ doubleCount }}</li>
              <li>✅ reactive: {{ state.name }}</li>
              <li>✅ onMounted: 页面加载完成</li>
            </ul>
            <el-button type="primary" @click="increment">
              <el-icon><Plus /></el-icon>
              计数 +1
            </el-button>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <h3>路由和状态管理自动引入</h3>
            </template>
            <ul>
              <li>✅ useRouter: 路由跳转</li>
              <li>✅ useRoute: 当前路由 {{ $route.path }}</li>
              <li>✅ useAppStore: 主题 {{ appStore.theme }}</li>
              <li>✅ useUserStore: 用户状态管理</li>
            </ul>
            <el-button type="warning" @click="toggleTheme">
              <el-icon><Sunny /></el-icon>
              切换主题
            </el-button>
          </el-card>
        </el-col>
      </el-row>

      <el-divider />

      <!-- Element Plus 组件自动引入演示 -->
      <el-card shadow="hover">
        <template #header>
          <h3>Element Plus 组件自动引入</h3>
        </template>
        <el-space wrap>
          <el-button type="primary">Primary</el-button>
          <el-button type="success">Success</el-button>
          <el-button type="info">Info</el-button>
          <el-button type="warning">Warning</el-button>
          <el-button type="danger">Danger</el-button>
        </el-space>

        <el-divider />

        <el-row :gutter="20">
          <el-col :span="8">
            <el-input v-model="inputValue" placeholder="输入测试" />
          </el-col>
          <el-col :span="8">
            <el-select v-model="selectValue" placeholder="选择测试">
              <el-option label="选项1" value="1" />
              <el-option label="选项2" value="2" />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" />
          </el-col>
        </el-row>
      </el-card>

      <el-divider />

      <!-- 工具库自动引入演示 -->
      <el-card shadow="hover">
        <template #header>
          <h3>工具库自动引入</h3>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="Lodash-es">
            <el-tag>{{ debouncedValue }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="Nanoid">
            <el-tag>{{ uniqueId }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="防抖输入">
            <el-input v-model="searchValue" placeholder="输入测试防抖功能" @input="handleSearch" />
          </el-descriptions-item>
          <el-descriptions-item label="生成新ID">
            <el-button size="small" @click="generateId">
              <el-icon><Refresh /></el-icon>
              生成新ID
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-divider />

      <!-- Composables 自动引入演示 -->
      <el-card shadow="hover">
        <template #header>
          <h3>Composables 自动引入</h3>
        </template>
        <el-alert
          :title="`API请求状态: ${loading ? '加载中...' : '空闲'}`"
          :type="loading ? 'warning' : 'success'"
          :closable="false"
        />
        <br />
        <el-button :loading="loading" @click="testApi">
          <el-icon><Connection /></el-icon>
          测试API请求
        </el-button>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
// 🎉 大部分内容都无需手动 import，已通过自动引入配置！
// ✅ Vue API: ref, computed, reactive, onMounted 等
// ✅ Vue Router: useRouter, useRoute
// ✅ Element Plus: ElMessage, 所有组件和图标
// ✅ Lodash-es: debounce, cloneDeep 等
// ✅ Nanoid: nanoid
// ✅ Composables: useApi, useUserApi 等 (从composables目录自动引入)

// Stores 通过统一的index.js导出，需要手动导入
import { useAppStore } from '@/stores'

// Vue 响应式数据
const count = ref(0)
const state = reactive({ name: 'Vue 3' })
const inputValue = ref('')
const selectValue = ref('')
const dateValue = ref('')
const searchValue = ref('')
const debouncedValue = ref('')
const uniqueId = ref(nanoid())

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 路由和状态管理
const _router = useRouter()
const appStore = useAppStore()

// Composables
const { loading, execute } = useApi()

// 方法
const increment = () => {
  count.value++
  ElMessage.success(`计数增加到 ${count.value}`)
}

const toggleTheme = () => {
  appStore.setTheme(appStore.theme === 'light' ? 'dark' : 'light')
  ElMessage.info(`主题切换为 ${appStore.theme}`)
}

const generateId = () => {
  uniqueId.value = nanoid()
  ElMessage.success('生成新的唯一ID')
}

// 防抖搜索
const handleSearch = debounce(_value => {
  debouncedValue.value = `防抖: ${searchValue.value}`
}, 500)

// 测试API
const testApi = async () => {
  try {
    await execute(() => new Promise(resolve => setTimeout(resolve, 2000)))
    ElMessage.success('API请求成功！')
  } catch {
    ElMessage.error('API请求失败')
  }
}

// 生命周期
onMounted(() => {
  console.log('🎉 AutoImportDemo 组件已挂载')
  ElMessage.info('页面加载完成，所有功能都已自动引入！')
})
</script>

<style scoped>
.auto-import-demo {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.el-descriptions {
  margin-top: 20px;
}
</style>
